import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const logger = createLogger({
  collapsed: false, // 自动展开记录的 mutation
  filter (mutation, stateBefore, stateAfter) {
    // 若 mutation 需要被记录，就让它返回 true 即可
    // 顺便，`mutation` 是个 { type, payload } 对象
    return mutation.type !== "aBlocklistedMutation"
  },
  actionFilter (action, state) {
    // 和 `filter` 一样，但是是针对 action 的
    // `action` 的格式是 `{ type, payload }`
    return action.type !== "aBlocklistedAction"
  },
  transformer (state) {
    // 在开始记录之前转换状态
    // 例如，只返回指定的子树
    return state.subTree
  },
  mutationTransformer (mutation) {
    // mutation 按照 { type, payload } 格式记录
    // 我们可以按任意方式格式化
    return mutation.type
  },
  actionTransformer (action) {
    // 和 `mutationTransformer` 一样，但是是针对 action 的
    return action.type
  },
  logActions: true, // 记录 action 日志
  logMutations: true, // 记录 mutation 日志
  logger: console, // 自定义 console 实现，默认为 `console`
})

const store = new Vuex.Store({
  // state == data
  state: {
    // 定义地址列表
    addressList: [],
    searchList: [],
    shopList: [],
    bannerList: [],
    // 全局的选中下标
    carIndex: 0,
    chosenAddressId: '',
    pageSize: 10,
    pageNum: 1,
    count: 1
  },
  // mutations == methods, 但是他只支持同步代码
  mutations: {
    changeId(state, id) {
      state.chosenAddressId = id;
    }
  },
  // actions == methods, 但是他还支持移步代码
  actions: {
    // 获取首页地址的数据
    getAddressList({ state }, list) {
      state.addressList = list;
      // 设置默认值
      state.chosenAddressId = list[0].id;
    },
    // 获取搜索和切换数据
    getSearchList({ state }, data) {
      // 把原有的数据 + 再次请求的数据
      state.searchList = [...state.searchList, ...data.list];
      state.count = data.count;

      // 当前页数 + 1
      state.pageNum += 1;
    },
    // 获取首页轮播图数据
    getBannerList({ state }, list) {
      state.bannerList = list;
    },
    // 获取详情页购物车数据
    getShopList({ state }, list) {
      state.shopList = list;
    },
    // 切换首页地址
    changeIndex({ state }, carIndex) {
      state.carIndex = carIndex;
    },
    // 点击添加到城市数组中
    addAddressList({ state }, {content, id}) {
      // 判断添加时当前是否这是默认
      if(content.isDefault) {
        // 、1. 干掉原来的选中项
        state.addressList.forEach(item => item.isDefault = false);
      }
      // 添加需要展示的数据
      content.address = content.addressDetail;

      // 如果 id 存在那么就是 编辑
      if(id) {
        const i = state.addressList.findIndex(item => item.id == id);
        
        state.addressList.splice(i, 1, content);
      } else {
        content.id = +new Date() + '';
        state.addressList.push(content);

        // 2, 修改carIndex
        state.carIndex = state.addressList.length - 1;
      }
    },
    // 修改收货地址的 id
    changeId({ state, commit  }, id) {
      commit('changeId', id);
    },
    // 实现分类页面的购物车 ++ -- 功能
    addCount({ state }, { index, index1, type }) {
      type === "+"
      ? state.shopList[index].children[index1].count += 1
      : state.shopList[index].children[index1].count -= 1
    }
  },
  // getters == computed,计算属性
  getters: {
    // 计算总价格
    priceAll(state) {
      return state.shopList.map(item => item.children.reduce((p, n) => p + (n.count * n.price), 0)).reduce((p , n) => p + n, 0);
    },
    // 计算总数量
    countAll(state) {
      return state.shopList.map(item => item.children.reduce((p, n) => p + n.count, 0)).reduce((p , n) => p + n, 0);
    }
  },
  // 用于合并多个 vuex
  modules: {
  },
  plugins: [logger]
})

// subscribe 是用来监听 store -> state 的数据发生改变时，出发的函数
// 这个函数的出发条件必须是  mutation 发生改变之后
store.subscribe((mutation, state) => {
  // 每次 mutation 之后调用
  // mutation 的格式为 { type, payload }
  console.log(mutation, state);
  // 可以对 state 的更新做一次处理
  // 本地存储
})

export default store;
